<template>
  <div class="person">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" >
        <el-form-item label="是否已有贷款" prop="loanStatus" class="form-item ">
          <el-select v-model="ruleForm.loanStatus" placeholder="请选择" @input="vailPayInfo('ruleForm')">
            <el-option v-for="item in hasLoanList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="已有贷款月还款额" prop="loanMonthRepay" class="form-item ">
          <el-input placeholder="请输入内容" v-model="ruleForm.loanMonthRepay" :disabled="isdisabled"></el-input>
          <span style="line-height:40px;padding-left:5px"> 元</span>
        </el-form-item>
      <footer>
        <el-button @click="before()">上一步</el-button>
        <el-button @click="next('ruleForm')">下一步</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </footer>
    </el-form>
  </div>
</template>

<script>
import eventVue from '../../assets/js/eventVue.js'
export default {
  name: 'LoanSituation',
  data() {
      return {
        isdisabled:false,
        selected:0,
        active:0,
        hasLoanList:[],
        ruleForm: {
          loanStatus: '',
          loanMonthRepay: '',
        },
        rules: {
          loanStatus: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
          loanMonthRepay: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
        },
        id:'',
        peieceId:''
      };
    },
    mounted(){    
        this.$store.commit('title','已有贷款情况')
        const instNo = sessionStorage.getItem('instNo')
        this.axios.get('/zyapply-api/parameter/bizSystem/'+instNo).then((res)=>{
           //是否已有贷款
           var hasLoanListResult = res.data.data.data[11];
           for(var i=0; i<hasLoanListResult.length; i++){
              var card_item = {};
              card_item.value = res.data.data.data[11][i].ovValue;
              card_item.label= res.data.data.data[11][i].ovLabel;
              this.hasLoanList.push(card_item);
           }
           //已有贷款月还款额
          //  var loanRapayListResult = res.data.data.data[47];
          //  for(var i=0; i<loanRapayListResult.length; i++){
          //     var card_item = {};
          //     card_item.value = res.data.data.data[47][i].ovValue;
          //     card_item.label= res.data.data.data[47][i].ovLabel;
          //     this.loanRapayList.push(card_item);
          //  }

         }).then((result)=>{
        var params=this.$route.query;
      this.axios.get("/zyapply-api/detailPieces/"+params.pieceId).then((result)=>{
        if(result.data.status==200){
        var info =result.data.data;
        if(info!=null){
          if(info.id!=null&&info.id!=""){
            this.id=info.id;

          }
          if(info.applyDetail.loanMonthRepay!=null&&info.applyDetail.loanMonthRepay!=""){
            this.ruleForm.loanMonthRepay=info.applyDetail.loanMonthRepay;
          }
            //this.ruleForm.loanStatus=info.applyDetail.loanStatus;
        }
      }
    })
      })


    },
    methods: {
      /**当没有贷款时非必填 */

      vailPayInfo(formName) {
        if(this.ruleForm.loanStatus=='N'){
            this.rules.loanMonthRepay[0].required = false;
            this.$refs[formName].validateField('loanMonthRepay',()=>{this.ruleForm.loanMonthRepay='';this.isdisabled = true})
        }else{
            this.rules.loanMonthRepay[0].required = true;
            this.isdisabled = false
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.active=3;
        this.$emit('nextStep3',this.active);
        this.rules.loanMonthRepay[0].required = true;
      },
      next(formName) {
        var that = this;
        this.$refs[formName].validate(function(success,error){
          if(success){
            that.$store.commit('title','附件上传')
            that.active=4;
            that.selected=4;
            eventVue.$emit("loanData", that.ruleForm)
          }else{
            that.active=3;
            that.selected=3;
          }
          that.$emit('nextStep',that.active);
          that.$emit('nextStep2',that.selected);
        })

      },
      
      before(){
        this.$store.commit('title','自有营运车辆情况')
        this.active = 2;
        this.selected = 2;
        this.$emit('beforeStep',this.active);
        this.$emit('beforeStep2',this.selected);
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .demo-ruleForm {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    margin-bottom: 80px;
  }

  .form-item {
    min-width: 25%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .full {
    width: 100% !important;
  }

  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    min-height: 80px;
    background: #ddd;
    align-items: center;
    justify-content: center;
  }

</style>
